<template>
  <div class="app-container">
    <!--个人信息展示  -->
    <el-row :gutter="20">
      <!--求职状态选项卡-->
      <el-col :span="24">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">个人简历</span></el-menu-item>
        </el-menu>
      </el-col>
      <!--求职状态选项卡-->
      <!--简历展示容器-->
      <el-col :span="24">
        <el-card
          style="
            margin-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            border: 3px solid #FFFFFF;
            box-shadow: 1px 2px 5px #999999;"
          shadow="hover">
          <el-col :span="19" style="border: 3px solid #999999;">
            <template v-if="resumeInfo">
              <el-collapse  v-model="activeNames">
                <el-collapse-item name="1" >
                  <template slot="title">
                    <h2 style="color: mediumvioletred">{{resumeInfo.studentName}}的个人简历<i class="header-icon el-icon-info"></i></h2>
                  </template>
                  <div>
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">求职状态</span></el-divider>
                    <el-tag size="medium"
                            effect="plain"
                            type="danger">
                      {{resumeInfo.jobStatus}}
                    </el-tag>
                  </div>
                  <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">简历描述</span></el-divider>
                  <div>{{resumeInfo.remark}}</div>
                  <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">求职意向</span></el-divider>
                  <!--求职意向列表展示-->
                  <div style="clear: both;">
                    <el-card
                      style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #999999;
                    width: 100%;"
                      shadow="hover">

                      <template v-if="intentionList.length != 0">
                        <el-descriptions v-for="(item,index) in intentionList"   :key="item.id"  style="padding: 20px;color: red;"  :title="item.name" :column="2">
                          <el-descriptions-item label="薪资要求">{{item.salary}}</el-descriptions-item>
                          <el-descriptions-item label="期望城市">{{item.city}}</el-descriptions-item>
                          <el-descriptions-item label="工作性质">{{item.workType}}</el-descriptions-item>
                          <el-descriptions-item label="期望行业">
                            <template v-for="(item,index) in item.industryList" v-key="item.id"  >
                              <span>{{item}}</span>
                              <el-divider direction="vertical"></el-divider>
                            </template>
                          </el-descriptions-item>
                        </el-descriptions>
                      </template>
                      <template v-else>
                        <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有求职意向方面的说明哦！">
                          <template slot="extra">
                            <el-empty description="快新增增求职意向吧！"></el-empty>
                          </template>
                        </el-result>
                      </template>

                    </el-card>
                  </div>
                  <!--求职意向列表展示-->
                  <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">项目经历</span></el-divider>
                  <!--项目经历列表展示-->
                  <div style="clear: both;">
                    <el-card
                      style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                      shadow="hover">

                      <template v-if="projectList.length != 0">
                        <el-descriptions :key="item.id" v-for="(item,index) in projectList"    style="padding: 20px;color: red;"  :title="item.name" :column="2">
                          <el-descriptions-item label="项目名称">{{item.name}}</el-descriptions-item>
                          <el-descriptions-item label="开始时间">{{item.beginTime}}</el-descriptions-item>
                          <el-descriptions-item label="结束时间">{{item.endTime}}</el-descriptions-item>
                          <el-descriptions-item label="项目简述">{{item.description}}</el-descriptions-item>
                        </el-descriptions>
                      </template>
                      <template v-else>
                        <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有求职意向方面的说明哦！">
                          <template slot="extra">
                            <el-empty description="快新增增求职意向吧！"></el-empty>
                          </template>
                        </el-result>
                      </template>

                    </el-card>
                  </div>
                  <!--项目经历列表展示-->
                  <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">培训经历</span></el-divider>
                  <!--培训经历列表展示-->
                  <div style="clear: both;">
                    <el-card
                      style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                      shadow="hover">

                      <template v-if="trainList.length != 0">
                        <el-descriptions :key="item.id"   v-for="(item,index) in trainList"   style="padding: 20px;color: red;"  :title="item.course" :column="2">
                          <el-descriptions-item label="培训机构(公司)">{{item.trainCompany}}</el-descriptions-item>
                          <el-descriptions-item label="培训开始时间">{{item.beginTime}}</el-descriptions-item>
                          <el-descriptions-item label="培训结束时间">{{item.endTime}}</el-descriptions-item>
                          <el-descriptions-item label="培训课程">{{item.course}}</el-descriptions-item>
                        </el-descriptions>
                      </template>
                      <template v-else>
                        <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有培训经历方面的说明哦！">
                          <template slot="extra">
                            <el-empty description="快新增增培训经历吧！"></el-empty>
                          </template>
                        </el-result>
                      </template>

                    </el-card>
                  </div>
                  <!--培训经历列表展示-->
                  <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">荣誉证书</span></el-divider>
                  <!--荣誉证书列表展示-->
                  <div style="clear: both;">
                    <el-card
                      style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                      shadow="hover">

                      <template v-if="certificateList.length != 0">
                        <el-descriptions  :key="item.id"  v-for="(item,index) in certificateList"   style="padding: 20px;color: red;"  :title="item.name" :column="2">
                          <el-descriptions-item label="证书名称">{{item.name}}</el-descriptions-item>
                          <el-descriptions-item label="获得时间">{{item.createTime}}</el-descriptions-item>
                        </el-descriptions>
                      </template>
                      <template v-else>
                        <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有荣誉证书方面的说明哦！">
                          <template slot="extra">
                            <el-empty description="快新增增荣誉证书吧！"></el-empty>
                          </template>
                        </el-result>
                      </template>

                    </el-card>
                  </div>
                  <!--荣誉证书列表展示-->
                  <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">学生干部经历</span></el-divider>
                  <!--学生干部列表展示-->
                  <div style="clear: both;">
                    <el-card
                      style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                      shadow="hover">

                      <template v-if="studentCadreList.length != 0">
                        <el-descriptions :key="item.id" v-for="(item,index) in studentCadreList"    style="padding: 20px;color: red;"  :title="item.name" :column="2">
                          <el-descriptions-item label="干部类型">{{item.type}}</el-descriptions-item>
                          <el-descriptions-item label="干部职务">{{item.name}}</el-descriptions-item>
                          <el-descriptions-item label="任职开始时间">{{item.beginTime}}</el-descriptions-item>
                          <el-descriptions-item label="任职结束时间">{{item.endTime}}</el-descriptions-item>
                        </el-descriptions>
                      </template>
                      <template v-else>
                        <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有学生干部方面的说明哦！">
                          <template slot="extra">
                            <el-empty description="快新增增学生干部吧！"></el-empty>
                          </template>
                        </el-result>
                      </template>

                    </el-card>
                  </div>
                  <!--学生干部列表展示-->

                </el-collapse-item>
              </el-collapse>
            </template>

            <template v-else>
              <div style="float: left">
                <el-image
                  style="width: 400px; height: 300px;padding: 20px;"
                  fit="fit"
                  src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/%E6%B1%82%E8%81%8C%E7%AE%80%E5%8E%86%E9%85%8D%E5%9B%BE.jpg">
                </el-image>
              </div>
              <div style="float: right; width: 600px; margin-right: 30px;">
                <div style="text-align: center;font-weight: bolder;">
                  <span style="color: indianred">头上一片晴天</span>
                  <el-divider direction="vertical"></el-divider>
                  <span style="color: indianred">心中一个想念</span>
                  <el-divider content-position="right">少年包青天</el-divider>
                </div>

                <div>
                  <h3>【成都】 ——赵雷</h3>
                  <p>让我掉下眼泪的 ,不止昨夜的酒</p>
                  <p>让我依依不舍的,不止你的温柔,余路还要走多久,你攥着我的手,让我感到为难的,是挣扎的自由</p>
                  <p>分别总是在九月,回忆是思念的愁</p>
                  <p>深秋嫩绿的垂柳, 亲吻着我额头</p>
                  <p>在那座阴雨的小城里,我从未忘记你, 成都 带不走的 只有你.</p>
                  <p>在那座阴雨的小城里,我从未忘记你, 成都 带不走的 只有你.</p>
                </div>
                <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
              </div>

            </template>

          </el-col>
          <el-col :span="5">
            <el-result icon="warning" title="信息提示" subTitle="简历不在于多在于精细表达自我！同学最多拥有【一份简历】笑脸">

              <template slot="extra" v-if="resumeInfo">
                <el-button type="primary" size="large" @click="handleUpdateDialog">修改简历<i class="el-icon-edit"></i></el-button>
              </template>

              <template slot="extra" v-else>
                <el-button type="primary" size="large" @click="handleAddDialog">新增简历<i class="el-icon-folder-add"></i></el-button>
              </template>

            </el-result>
          </el-col>
        </el-card>
      </el-col>
      <!--简历展示容器-->


    </el-row>
    <!--个人信息展示  -->


    <!--修改简历对话框-->
    <el-dialog
      title="修改简历对话框"
      :visible.sync="dialogFormVisible4Edit"
      width="600px"
      :before-close="handleEditFormClose">

      <el-form :model="formData" :rules="rule" ref="dataEditForm">

        <el-form-item label="求职状态" label-width="100px" prop="jobStatus">
          <el-select v-model="formData.jobStatus" label-width="100px" placeholder="请选择你的求职状态">
            <el-option label="离校-正在找工作" value="离校-正在找工作"></el-option>
            <el-option label="在校-正在找工作" value="在校-正在找工作"></el-option>
            <el-option label="在校-看看机会" value="在校-看看机会"></el-option>
            <el-option label="在校-暂不找工作" value="在校-暂不找工作"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="简历描述"  prop="remark" label-width="100px">
          <el-input type="textarea" style="height: 300px;" v-model="formData.remark" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleEdit('dataEditForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改简历对话框-->
  </div>
</template>

<script>
import {getIntentionList} from '@/api/intention';
import {findAllTrain} from '@/api/train';
import {findAllProject} from '@/api/project';
import {findAllStudentCadre} from '@/api/studentCadre';
import {findAllCertificate} from '@/api/certificate';

import {getResume,updateJobStatus} from '@/api/resume';
export default {
  name: "index",
  data() {
    return {
      activeNames: ['1'],//默认打开手凤器
      wrapperVisible:false, //展示展示框状态
      dialogFormVisible: false,//增加表单是否可见
      dialogFormVisible4Edit:false,//编辑表单是否可见
      formData:{},//表单数据
      resumeInfo:{}, //简历信息系
      rule: {
        remark: [{required: true, message: '请输入用户名称', trigger: 'blur'}],
        jobStatus: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
      },//表单的校验规则
      intentionList:[],//求职意向列表
      trainList:[],//培训经历列表
      projectList:[],//项目经验列表
      studentCadreList:[],//学生干部列表
      certificateList:[],//荣誉证书列表
    }
  },
  created() {
    this.getResume()
    this.getIntentionList()
    this.getProjectList()
    this.getTrainList()
    this.getCertificateList()
    this.getStudentCadreList()

  },
  methods: {
    //获取求职意向集合
    getIntentionList(){
      console.log("======系统正在获取学生求职意向列表========")
      getIntentionList().then(res=>{
        this.intentionList = res.data;
      })
      console.log("======系统获取学生求职意向列表成功！！========")
    },
    //获取项目经历集合
    getProjectList(){
      console.log("======系统正在获取学生项目经验集合========")
      findAllProject().then(res=>{this.projectList = res.data;})
      console.log("======系统获取学生项目经验集合成功！！========")
    },
    //获取培训经历集合
    getTrainList(){
      console.log("======系统正在获取学生培训经历集合========")
      findAllTrain().then(res=>{this.trainList = res.data;})
      console.log("======系统获取学生培训经历集合成功！！========")
    },

    //获取荣誉证书集合
    getCertificateList(){
      console.log("======系统正在获取学生荣誉证书集合========")
      findAllCertificate().then(res=>{this.certificateList = res.data})
      console.log("======系统获取学生荣誉证书集合成功！！========")
    },

    //获取学生干部经历集合
    getStudentCadreList(){
      console.log("======系统正在获取学生学生干部集合========")
      findAllStudentCadre().then(res=>{this.studentCadreList = res.data;})
      console.log("======系统获取学生学生干部集合成功！！========")
    },

    //获取学生简历
    getResume(){
      getResume().then(res=>{this.resumeInfo = res.data;})
    },

    //弹出编辑窗口的方法
    handleUpdateDialog() {
      console.info("【====系统正在弹出的修改用户窗口====】")
      this.resetForm();
      this.dialogFormVisible4Edit = true;
      getResume().then(res=>{this.formData = res.data;})
      console.info(`====【系统正在弹出的修改用户窗口成功！！并成功获取了ID为：${row.id}的用户详情=====`)

    },

    //处理修改的方法
    handleEdit(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        console.info("【系统正在进行修改简历状态】")
        if (valid) {
          updateJobStatus(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.getResume()
              }
            });
            this.dialogFormVisible4Edit = false;
            this.getResume()
            console.info("【系统成功修改简历状态成功！】")
          });
        }
      });
    },

    //关闭修改表单窗口的方法
    handleEditFormClose(){
      this.dialogFormVisible4Edit = false
      this.resetForm();
    },

    //重置表单的方法
    resetForm() {
      this.formData = {}
      this.roleFormData = {}
    },


  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}

/*求职状态标题*/
.job-status__title {
  float: left;
  margin-bottom: 29px;
  font-size: 24px;
  color: #333;
  letter-spacing: 1.21px;
}
/*求职状态标题*/

/*求职状态必填标识项*/
.job-status__title__must {
  background: #ef7c67;
  border-radius: 2px;
  display: inline-block;
  width: 34px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  vertical-align: 4px;
}
/*求职状态必填标识项*/

/*个人信息包裹容器*/
.profile-pre-wrapper {
  clear: both;
  position: relative;
  color: #333;
  padding-top: 20px;
}
/*个人信息包裹容器*/
</style>
